
import { useEffect, useState } from "react"
import FloatListCard from "./floatList"
import { GetSpecialAreaProductList } from '@/api/modules/home'
import useBottomFresh from "@/hooks/useBottomFresh"
import '../index.less'


const NoRivals = ({})=>{


  const [list , setList] = useState([])

  async function getlist(){
    const r1 = GetSpecialAreaProductList({"ApecialArea":1,"Count":9})
    const r2 = GetSpecialAreaProductList({"ApecialArea":2,"Count":9})
    const r3 = GetSpecialAreaProductList({"ApecialArea":3,"Count":9})
    // const r4 = GetSpecialAreaProductList({"ApecialArea":4,"Count":9})
    const data1  = await r1
    const data2  = await r2
    const data3  = await r3
    // const data4  = await r4
    if(data1.success==200){
      setList( n => [...n, ...data1.data])
    }
    if(data2.success==200){
      setList(n => [...n, ...data2.data])
    }
    if(data3.success==200){
      setList(n => [...n, ...data3.data])
    }
    // if(data4.success==200){
    //   setList(n => [...n, ...data4.data])
    // }
  }

  useEffect(()=>{
  getlist()
  },[])


  return(
    <FloatListCard title="超越极限 降到没对手" moreRoute="" >
      {
        list.map((item:Object,idx:Number)=>{
          return (
            <div key={item.Id || idx} className="noitem relative ">
              <img src={item.Img} alt="" />
              <div className="text-white	flex place-content-center items-center preferential text-xs absolute">{ item.pesen }%OFF</div>
              <p className="text-xs	line-clamp-2">
                { item.ProductName }
              </p>
              <p className="p2">即将恢复原价</p>
              <p className="p3 text-sm font-bold">Rp {item.SellPrice }</p>
              <p className="p4 text-xs">Rp {item.OriginalPrice}</p>
            </div>
          )
        })
      }
    </FloatListCard>
  )
}

export default NoRivals